<template>
	<div class="hotel">
		<h1>酒店预约列表</h1>
		<div class="content" v-if="isShow">
			<el-row>
				<el-button type="primary" @click="addHotel">新增预约</el-button>
			</el-row>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column label="房型" width="100px">
					<template slot-scope="scope" 	>
						<span>{{ scope.row.name }}</span>
					</template>
				</el-table-column>
				<el-table-column label="图片1" width="170px">
					<template slot-scope="scope">
							<img :src="baseUrl+scope.row.img_url1" width="100px">
					</template>
				</el-table-column>
				<el-table-column label="图片2" width="170px">
					<template slot-scope="scope">
						<img :src="baseUrl+scope.row.img_url2" width="100px">

					</template>
				</el-table-column>
				<el-table-column label="图片3" width="170px">
					<template slot-scope="scope">
							<img :src="baseUrl+scope.row.img_url3" width="100px">
					</template>
				</el-table-column>
				<el-table-column label="电话" width="100px">
					<template slot-scope="scope">
						<span>{{ scope.row.phone }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作"  >
					<template slot-scope="scope">
						<el-button size="mini" @click="ascend(scope.$index, scope.row)">上升</el-button>
						<el-button size="mini" @click="descend(scope.$index, scope.row)">下降</el-button>
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click.native.prevent="deleteRow(scope.$index, tableData)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="content" v-else="isShow">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
   <el-form-item label="电话" prop="phone">
    <el-input v-model="ruleForm.phone"></el-input>
  </el-form-item>
<el-form-item label="图片">
   <el-upload
  class="upload-demo"
  ref="upload"
  action="https://jsonplaceholder.typicode.com/posts/"
  :file-list="fileList"
  :limit="3" 
:on-change='changeUpload' accept="image/jpeg,image/gif,image/png,image/bmp"
  :auto-upload="false" 
   >
   <!-- :auto-upload="false"取消自动上传-->	
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">提交三张图片</div>
</el-upload>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即提交</el-button>
  </el-form-item>
</el-form>
		</div>
	</div>

</template>

<script>
	import config1 from "@/assets/js/config1.js";
	import config from "@/assets/js/config.js";
export default {
	data() {
		return {
			page:0,
			list:[],
			baseUrl:config1.baseUrl,
			arr:[],
			tableData: [{
				name: '',
				img_url1:"",
				img_url2:"",
				img_url3:"",
				phone:'',
				orders:'',
				id:''
			}],
			ruleForm: {
				name: '',
				phone: ''
			},
			rules: {
				name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					},

				],
				phone: [{
					required: true,
					message: '请输入电话',
					trigger: 'blur'
				}],

			},
			fileList: [],
			isShow: true,
			formData: new FormData()
		}

	},
	methods: {
	     changeUpload(file, fileList) {
			var formData = new FormData();
			formData.append("files", file.raw);
			this.$require.post(config.uploadImg, formData, {
				headers: {
					Authorization: "Bearer " + this.$store.state.token
				}
			}).then((res) => {
				  console.log(res)
				  console.log( this.tableData)
		        this.arr.push(res.data.data.img_url)
		        this.tableData.img_url1=this.arr[0]
		         this.tableData.img_url2=this.arr[1]
		          this.tableData.img_url3=this.arr[2]
		         console.log(this.arr)
			})
		},
		handleEdit(index, rows) {
			 console.log(rows)
			 this.$router.push({path: '/hoteledit', 
	         query:{
	         	id:rows.id,
	         	list:rows
	         	
	         }})
		},
		descend(index, rows){
				//降序
				console.log(rows.orders)
				this.$require.post(config.sortHotel,{
					move:-1,
					orders:rows.orders,
				},{
					header:{
						Authorization: "Bearer " + this.$store.state.token
					}
				}).then((res)=>{
					console.log(res)
				})
			},
			ascend(index, rows){
				//升序
				console.log(rows.orders)
				this.$require.post(config.sortHotel,{
					move:1,
					orders:rows.orders,
				},{
					header:{
						Authorization: "Bearer " + this.$store.state.token
					}
				}).then((res)=>{
					console.log(res)
				})
			},
			
	deleteRow(index, rows) {
			  
		  this.$require.post(config.delHotel,{
		        id:rows[index].id
		  },{
				headers: {
					Authorization: "Bearer " + this.$store.state.token
				}
			}).then((res)=>{
		  	console.log(res)
		  })
             rows.splice(index,1);
		},
submitForm(formName) {
	
		this.$refs[formName].validate((valid) => {
			if(valid) {
				this.isShow = !this.isShow
				this.$require.post(config.hotel, {
					img_url1: this.tableData.img_url1,
					img_url2: this.tableData.img_url2,
					img_url3: this.tableData.img_url3,
					name: this.ruleForm.name,
					phone: this.ruleForm.phone
				}).then((res)=>{})
			} else {

				return false;
			}
		});
	},
	resetForm(formName) {
		this.$refs[formName].resetFields();
	},
	submitUpload() {
		this.$refs.upload.submit();
			this.$notify({
					title: '',
					message: '上传成功',
					type: 'success'
				});
	},

	addHotel() {
		this.isShow = !this.isShow
	}

},
created() {
	this.$require.get(config1.reserHotelList).then((res) => {
            console.log(res)
		this.tableData = res.data.data.rows
          console.log(this.tableData)   
      console.log(this.ruleForm.phone)
          
	})
}
}</script>

<style lang="scss" scoped="scoped">
	$htitle:32px; //标题文字大小
	.hotel {
		padding: 0 30px;
	}
	
	h1 {
		font-size: $htitle;
		margin: 21px 0;
	}
	
	.el-table td,
	.el-table th {
		padding: 12px 0;
	}
	
	.el-button--mini,
	.el-button--mini.is-round {
		padding: 12px 20px;
	}
</style>